<!DOCTYPE HTML>
<HTML>
<HEAD>
    <META content="IE=11.0000" http-equiv="X-UA-Compatible">
    <TITLE>浙江省数字安全证书 身份认证 JavaScript DEMO </TITLE>     
    <META http-equiv="Content-Type" content="text/html; charset=utf-8">

	<!--UI式样文件-->
    <LINK href="css/style.css" rel="stylesheet" type="text/css"> 	

    <!--ZJCA客户端相关的JS文件-->
	<script src="../../zjca_cmt/jquery.min.js" type="text/javascript"></script>
	<script src="../../zjca_cmt/zjcacmt.js" type="text/javascript"></script>
	<script src="../../zjca_cmt/zjcacmt_cert.js" type="text/javascript"></script>
	<script src="../../zjca_cmt/zjcacmt_key.js" type="text/javascript"></script>
	<script src="../../zjca_cmt/zjcacmt_com.js" type="text/javascript"></script>
	<script src="../../zjca_cmt/zjcacmt_websocket.js" type="text/javascript"></script>
	<script src="../../zjca_cmt/zjcacmt_def.js" type="text/javascript"></script>
	<script src="../../zjca_cmt/zjcacmt_err.js" type="text/javascript"></script>
	
	<!--证书选择框相关-->
	<script type="text/javascript" src="js/jquery.min.js" ></script>
	<script type="text/javascript" src="js/login_mod.js"></script>
	<script type="text/javascript" src="js/drag.js" ></script>
     
	<SCRIPT type="text/javascript">
		/* ZJCA 客户端插件对象 */
		var g_ZjcaCMT = null;
		/* 当前枚举到的证书列表 */
		var g_UsingCertArray = null

		/*
		 *	页面初始化
		 */
		window.onload = function() {
			//创建ZJCA客户端控件对象
			g_ZjcaCMT = new zjca_CMT(null, null);
			
			//设置客户端交互协议，在初始之前设置生效
			g_ZjcaCMT.setProtocol(PROTOCOL_HTTPS);
			
			//初始化ZJCA控件对象
			var resp = g_ZjcaCMT.init(ZJCA_PRODUCT_CMT, 1);
			if (resp.code != 0) {
				alert("初始化ZJCA客户端失败！\n错误信息：" + resp.msg);
			}
		}		
		/*
		 *	页面关闭
		 */
		window.onunload = function () {
			/* 释放接口 */
			if (g_ZjcaCMT) {
				g_ZjcaCMT.finaled();
			}
		}
		/*
		 *	生成测试用的挑战码
		 */
        function GenTestAuthCode(size) {
			var code = "";			
			for (i = 0; i < size; i++) {
				var num = parseInt(Math.random() * 255 + 0);
				code += num.toString(16);
			}
			return code;
		}
		/*
		 *	证书登录、弹出证书选择框
		 */		
		function onBtnCertLogin()　{			
			//获取当前的证书列表(所有介质内的所有签名证书)
			var resp = g_ZjcaCMT.getCertList(-1, 0, ZJCA_CERT_SIGN);
			if (resp.code != 0) {
				ShowErrorMessage("g_ZjcaCMT.getCertList()失败！", resp.code);
				return;
			}else {
				g_UsingCertArray = new Array;
				g_UsingCertArray = resp.res;
			}
			
			//显示证书选择框,该函数在文件login_mod.js中实现!!!
			dlg_zcjaShowCertSelect(g_UsingCertArray, g_ZjcaCMT);
		}
		/*
		 *	证书选择框上的“确定”按钮响应函数
		 */	
		function onBtnCertSelected() {
			//获取用户选中的证书序号,该函数在文件login_mod.js中实现!!!
			var selIndex = dlg_zcjaGetSelectedCert();
			if (selIndex >= 0) {	// 选择了有效的证书		
				//更新挑战
				//!!!!此处，前端在每次尝试登录前，都应向Web服务器发出申请、并获取挑战码!!!!
				//!!!!本Demo只是简单的利用使用随机数作为挑战码!!!!!
				var authCode = GenTestAuthCode(16);
				document.form1.txtPlainText.value = authCode;	
			
				// 显示证书信息(可根据项目情况确定是否需要)
				ShowCertInfo(selIndex);
			
				// 进行证书登录
				DoCACertLogin(selIndex);
			}			
		}
        /*
         *  显示选择中的证书信息(可根据项目情况确定是否需要)
         */
		function ShowCertInfo(certIndex) {
			var selCertInfo = null;
		    if (isNaN(certIndex) || certIndex == -1) {
		    	return;
		    }

			if (certIndex >= 0 && certIndex < g_UsingCertArray.length) {	
				selCertInfo = g_UsingCertArray[certIndex];				
			}			
			else {
				selCertInfo = null;
			}
				
			// 显示证书主要信息
			if (selCertInfo) {
                document.form1.txtCertSN.value = selCertInfo.getSN();
                document.form1.txtSubjectCN.value = selCertInfo.getSubjectCN();
                document.form1.txtIssuerCN.value = selCertInfo.getIssuerCN();			
                document.form1.txtValidFrom.value = selCertInfo.getFrom();
                document.form1.txtValidUntil.value = selCertInfo.getUntil();
				//证书内容
				var resp = g_ZjcaCMT.getCertContent(selCertInfo.getKeyIndex(), selCertInfo.getAlg(), selCertInfo.getUsage());
				if (0 == resp.code) {
					//!!!!此处，前端每次在选择证书之后，都需要将证书内容保存，因为后面身份认证时需要将该证书内容发送给Web服务器!!!!
					//!!!!本Demo为了直观，只是简单地将证书内容显示在UI上!!!!!
					document.form1.txtCert.value = resp.res;
				}else {				
					ShowErrorMessage("g_ZjcaCMT.getCertContent()失败！", resp.code);
				}
			}
			else {
                document.form1.txtCertSN.value = "";
                document.form1.txtSubjectCN.value = "";
                document.form1.txtIssuerCN.value = "";		
                document.form1.txtValidFrom.value = "";
                document.form1.txtValidUntil.value = "";
                document.form1.txtCert.value = "";
			}			
		}
		/*
		 *	CA证书登录(签名挑战码)
		 */
        function DoCACertLogin(certIndex) {
            var signature;
			var selCertInfo = null;
		    if (isNaN(certIndex) || certIndex == -1) {
		    	return;
		    }
			if (certIndex >= 0 && certIndex < g_UsingCertArray.length) {	
				selCertInfo = g_UsingCertArray[certIndex];				
			}			
			else {
				return;
			}
			
			if (g_ZjcaCMT == null) {
				alert("ZJCA客户端JS接口为空！");
				return;
			}

			// 获取挑战码信息
            var authCode = document.form1.txtPlainText.value;
			
			// 使用选中的证书对挑战码签名
			var resp = g_ZjcaCMT.signMessageUseCert(selCertInfo, 	// 选择的证书
													ZJCA_SIGN_P1,	// 签名格式
													0,				// 签名附加信息
													authCode,		// 待签名的内容
													null            // UserId,传空表示自动取默认值
													);
			if (resp.code == 0) {   // 成功
				//!!!!此处，前端在签名成功之后，需要将签名结果、证书内容和挑战码发送给Web服务器进行身份认证!!!!
				//!!!!本Demo为了直观，只是简单地将签名结果显示在UI上!!!!!
                document.form1.txtSignedData.value = resp.res;	
			} else {   // 失败
				if (0x81000007 != zjca_GetErrHexCode(resp.code)) { //如果不是用户取消操作,则显示错误信息
					ShowErrorMessage("g_ZjcaCMT.signMessageUseCert()失败！", resp.code);
				}
				return "";
			}
        }	
		/*
		 *	显示错误信息函数
		 */
		function ShowErrorMessage(msg, code) {
			var errCode = zjca_GetErrHexCode(code);
			var errTxt = zjca_GetErrTxt(code);
		
			var errMsg = msg;
			errMsg += "\n";
			errMsg += "错误代码：";
			errMsg += errCode;
			errMsg += "\n";
			errMsg += "错误信息：";
			errMsg += errTxt;
			alert(errMsg);
		}	
		
</SCRIPT>
 
<META name="GENERATOR" content="MSHTML 11.00.9600.17728">
</HEAD> 
 <!--  -->
 <!--  -->
 <!--  -->
<BODY>
    <BR>
    <BR>
    <H2 align="center">浙江省数字安全证书 身份认证 JavaScript DEMO</H2>
    <FORM name="form1" action="">
    <button type="button" class="btn btn-primary" onclick="onBtnCertLogin();">CA证书登录</button>
    <BR>
    <BR>
    
    <FIELDSET>
        <LEGEND>证书信息：</LEGEND>
        <TABLE>
        <COLGROUP>
            <COL class="col1">
            <COL class="col2">
            <COL class="col3">
            <TBODY>
            <TR>
                <TD></TD>
                <TD></TD>
                <TD></TD>
            </TR>
            <TR>
                <TD>序列号（SN）：                 </TD>
                <TD><INPUT name="txtCertSN" type="text" readonly="readonly"></TD>
             </TR>
            <TR>
                <TD>使用者：                 </TD>
                <TD><INPUT name="txtSubjectCN" type="text" readonly="readonly"></TD>
            </TR>
            <TR>
                <TD>颁发者：                 </TD>
                <TD><INPUT name="txtIssuerCN" type="text" readonly="readonly"></TD>
			</TR>         
            <TR>
                <TD>有效期起始：                 </TD>
                <TD><INPUT name="txtValidFrom" type="text" readonly="readonly"></TD>
            </TR>
            <TR>
                <TD>有效期截止：                 </TD>
                <TD><INPUT name="txtValidUntil" type="text" readonly="readonly"></TD>
            </TR> 
            </TBODY>
        </TABLE> 
			<TR>
                <TD>证书内容：                 </TD>
				<TEXTAREA name="txtCert" rows="5" cols="70"></TEXTAREA>
			</TR>
    </FIELDSET>
    <BR>
    <FIELDSET>
        <LEGEND>身份认证</LEGEND>
        待签名的内容(挑战码，每次尝试登录前向Web服务器获取)：         
        <TABLE>
            <TBODY>
            <TR>
                <TD>
                    <TEXTAREA name="txtPlainText" rows="5" cols="60"></TEXTAREA>
                </TD>
            </TR>
            </TBODY>
        </TABLE>
        <HR>
        签名结果(将签名结果、证书内容和挑战码发送给Web服务器进行身份认证):         
        <TEXTAREA name="txtSignedData" rows="5" cols="70"></TEXTAREA>
        <HR>
        <TABLE>
          <COLGROUP>
          <COL class="col1">
          <COL class="col2">
          <COL class="col3">
          <TBODY>
          <TR>
            <TD></TD>
            <TD></TD>
            <TD></TD></TR>
         
          </TBODY>
        </TABLE>

    </FIELDSET>
    <BR>
    </FORM>
	<!-- 证书选择框控件，必须集成到前端页面 -->	
     <div id="oWindow" class="sameWindow">
        <div class="obt" id="double">
			<span class="title">证书安全</span>
			<div class="closeicon" onclick="closeWindow();"></div>
            <div class="atitle fs16">选择证书</div>
		</div>
		<div class="tab">
			选择证书
		</div>
        <div class="obs">
			
        </div>
        <div class="obb">
            <div class="obbb">
                <div class="btna" id="btn_sure" onclick="onBtnCertSelected();">确　定</div>
                <div class="btna" id="btn_no">取　消</div>
            </div>
        </div>
    </div>		
</BODY>
</HTML>
